<template>
    <div class="goods">
        <!-- 农产品 -->
        <img :src="goods.productImg" alt="">
        <p>{{ goods.productName }}</p>
        <div class="bottom">
            <span class="price">￥{{ goods.price }} /斤</span>
            <el-button type="warning" size="small" @click="buy(goods)">购买</el-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'Goods',
    components: {

    },
    mixins: [],
    props: ['goods'],
    data() {
        return {

        }
    },
    computed: {
        ...mapState('userStore', ['userInfo', 'token']),
    },
    watch: {

    },
    mounted() {
    },
    methods: {
        buy(goods) {
            if (!this.token) {
                this.$bus.$emit('show', true)
            } else {
                this.$bus.$emit('isGoodsShow', true)
                this.$bus.$emit('goods', goods)
            }

        }
    }
};
</script>
<style lang='less' scoped>
.goods {
    width: 100%;
    height: 260px;

    margin-bottom: 40px;
    color: #333;

    img {
        width: 100%;
        height: 180px;
        border-radius: 10px;
    }

    p {
        width: 100%;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        font-size: 14px;
    }

    .bottom {
        width: 100%;

        .price {
            color: red;
            padding-right: 10px;
        }


    }
}
</style>